<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>/mobile/bud/budProfile.jsp</title>

	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 

	<LINK href="${cPath }/css/bud.css"  rel="stylesheet"  type="text/css"/>
	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<SCRIPT type="text/javascript">
		$(document).on("mobileinit", function(){
			$.mobile.ajaxEnabled = false;
		});
		
		function insertComment(){
			var cm_ref_key = $("#cm_ref_key").val(); 
			var cm_from_member = $("#cm_from_member").val();
			var cm_comment = $("#cm_comment").val();
			
			var params =  "cm_ref_key=" + cm_ref_key + "&cm_from_member=" + cm_from_member + "&cm_comment=" + cm_comment;
			$.ajax({ 
				url : "${cPath }/scan/memberCommentAdd.mo",
				data : params,
				dataType : "json", 
				success : successFun,
				error : function(xhr){
					 alert("상태코드 : " + xhr.status +" 에러발생 ~ 잠시뒤 다시 시도!!");
				}
			});	
		}
		
		function successFun(result){
			location.reload();
			$("#cm_comment").attr("value","");
		}
		
		function deleteComment(cm_no){
			
			$.ajax({ 
				url : "${cPath }/bud/budDelComment.mo",
				data : "cm_no="+cm_no,
				dataType : "json", 
				success : successFun2,
				error : function(xhr){
					 alert("상태코드 : " + xhr.status +" 에러발생 ~ 잠시뒤 다시 시도해 주세요");
				}
			});	
		}
		
		function successFun2(result){
			location.reload();
			$("#msg2").trigger("click");
		}
		
	</SCRIPT>
	<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

</head>
<body>
<div id="budProfile" data-role="page" data-theme="b">
	<INPUT type="hidden" name="mem_no" value="${sessionScope.memberSession.mem_no }"/>
	<div data-role="header" data-position="fixed" data-theme="a">
		<div style="left:5px; top:5px; z-index:10001;position:fixed;" >
			<img src="${cPath }/css/webbud.png" height="30px" />
		</div>
		<a href="${cPath }/logout.mo" id="back" data-icon="custom" class="ui-btn-right">로그아웃</a>
		<h1>벗 프로필</h1>
		<div id="topNavbarId" data-role="navbar" data-iconpos="top" >
			<ul>
				<li><a href="${cPath }/scan/scanMap.mo" id="scan" data-icon="custom" >Scan</a></li>
				<li><a href="${cPath }/bud/budList.mo" id="bud" class="ui-btn-active" data-icon="custom" >Bud</a></li>
				<li><a href="${cPath }/chat/chatList.mo" id="chat" data-icon="custom">Chat</a></li>
				<li><a href="${cPath }/settings/setMain.mo" id="set" data-icon="custom">Settings</a></li>
			</ul>
		</div>
		
	</div>

	<div data-role="content" >
		<div class="ui-grid-a">
			<div id="" class="ui-block-a" style="padding-right: 5%; width:40%">
				<c:if test="${!empty member.mem_photoStr }">
					<img src="data:image/jpeg;base64, ${member.mem_photoStr }" width=100% 
						style="border-style:solid; border-color:Gray;" />
				</c:if>
				<c:if test="${empty member.mem_photoStr }">
					<img id="image" name="image" src="${cPath }/css/images/budlogo.png" 
						width=100% style="border-style:solid; border-color:Gray;" />
				</c:if>
				
			</div>
			<div class="ui-block-b" style="width:60%">
				<label for="basic" style="Color:#ef403d;"> Nickname </label><br />
				<label for="basic" style="font-size: 30px; font-weight: bold; ">&nbsp;&nbsp;${member.mem_name }</label><br />
				<label for="basic" style="Color:#ef403d;"> Gender </label><br />
				<label for="basic" style="font-size: 30px; font-weight: bold; ">&nbsp;&nbsp;
					<c:if test="${member.mem_gender == 'f' }">Female</c:if>
					<c:if test="${member.mem_gender == 'm' }">Male</c:if>
				</label>
			</div>	   
		</div>
		<br /><label for="basic" style="Color:#ef403d;"> Message </label>
		<br /><label for="basic" style="font-size: 20px; font-weight: bold; " >&nbsp;&nbsp;&nbsp;${member.mem_message }</label>
		
		<br /><br />
		
		<INPUT type="hidden" id="cm_ref_key" name="cm_ref_key" value="${member.mem_no }"/>
		<INPUT type="hidden" id="cm_from_member" name="cm_from_member" value="${sessionScope.memberSession.mem_no }"/>
		
			

		<ul data-role="listview" data-inset="true" data-split-icon="custom" id="delete" data-split-theme="d">
			<li data-role="list-divider"><label for="basic"> Comment </label></li>
			<li>
				<FORM action="${cPath }/scan/memberCommentAdd.mo">
				<div class="ui-grid-a">
					<div class="ui-block-a" style="width: 70%">
						<div data-role="fieldcontain" data-inline="true">
							<input type="text" id="cm_comment" name="cm_comment" value="" required="required" maxlength="20"/>
						</div>
					</div>
					<div class="ui-block-b" style="width:30%">
						<input type="button" value="전송"  onclick="insertComment()" data-theme="a"/>
					</div>
				</div>
				</FORM>
			</li>
			<c:if test="${empty commentMemberList }"><li>작성된 코멘트가 없습니다</li></c:if>
			<c:forEach var="commentMember" items="${commentMemberList }" varStatus="status">
				<li><a href="#">
				<c:if test="${!empty commentMember.mem_photoStr }">
					<img class="ui-li-icon" src="data:image/jpeg;base64, ${commentMember.mem_photoStr }" />
				</c:if>
				<c:if test="${empty commentMember.mem_photoStr }">
					<img class="ui-li-icon" src="${cPath }/css/webbud.png" />
				</c:if>		
				<p><LABEL style="float:left;">${commentMember.mem_name }</LABEL>
				<LABEL style="float:right;">${commentMember.cm_dateStr }</LABEL></p>
				<h3 style="font-size: 13px; color: gray;">${commentMember.cm_comment }</h3>
				</a>
				<c:if test="${sessionScope.memberSession.mem_no == commentMember.cm_from_member }">
					<a href="#popupDel${status.index }" data-rel="popup" data-position-to="window" data-transition="pop">삭제</a>
				</c:if>
				<c:if test="${sessionScope.memberSession.mem_no != commentMember.cm_from_member }">
					<a href="#"></a>
				</c:if>
				</li>
				 
	<div data-role="popup" id="popupDel${status.index }" data-overlay-theme="b" style="max-width:300px;" class="ui-corner-all">
		<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
			<h3 class="ui-title">정말로 삭제하시겠습니까?</h3>
			<a href="javascript:deleteComment('${commentMember.cm_no }')" data-role="button" data-inline="true" data-theme="a">삭제</a>    
			<a href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b">취소</a>
		</div>
	</div>
				 
			</c:forEach>
		</ul>
	</div>
	
	<div data-role="footer" data-position="fixed" data-theme="a">		
		<div data-role="navbar">
			<ul>
				<li><a href="${cPath }/chat/chatChatting.mo?mem_no=${member.mem_no}" >1:1대화</a></li>
				<li><a href="#popupDialog" data-rel="popup" data-position-to="window" data-transition="pop">벗삭제</a></li>
				<li><a href="javascript:history.back()" >닫기</a></li>
			</ul>
		</div>
	</div>
	
	<div data-role="popup" id="popupDialog" data-overlay-theme="b"  style="max-width:250px;" class="ui-corner-all">
		<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
			<h3 class="ui-title">정말로 ${member.mem_name } 님을 내 벗에서 삭제하시겠습니까?</h3>
			<a href="${cPath }/bud/budDelete.mo?mem_no=${member.mem_no }" data-role="button" data-inline="true" data-theme="a">삭제</a>    
			<a href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b">취소</a>  
		</div>
	</div>
	
	<a href="#popupMsg" data-rel="popup" id="msg2" hidden="true" data-position-to="window" data-transition="pop"></a>
	<div data-role="popup" id="popupMsg" data-overlay-theme="a" style="max-width:400px;" class="ui-corner-all">
		<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
			<h3 class="ui-title">삭제 완료</h3>
		</div>
	</div>

</div><!-- /page -->
</body>
</html>